<template>
  <div>{{ name }}</div>
  <div>{{ age + 20 }}</div>
  <div>{{ arr[0] }}</div>
  <div>{{ obj.name }}</div>
  <div>{{ istrue }}</div>
</template>

<script setup>
	import {  ref } from 'vue'
// 在模板中使用了一个 ref，然后改变了这个 ref 的值时，Vue 会自动检测到这个变化，并且相应地更新 DOM。
// 这是通过一个基于依赖追踪的响应式系统实现的。当一个组件首次渲染时，Vue 会追踪在渲染过程中使用的每一个 ref。然后，当一个 ref 被修改时，它会触发追踪它的组件的一次重新渲染。

// 在标准的 JavaScript 中，检测普通变量的访问或修改是行不通的,,对象属性的改变可以检测到
// 从概念上讲，可以将 ref 看作是一个对象：
// 伪代码，不是真正的实现
// const myRef = {
// 	_value: 0,
// 	get value () {
// 		track()
// 		return this._value
// 	},
// 	set value (newValue) {
// 		this._value = newValue
// 		trigger()
// 	}
// }

let name = ref("水电费")
let age = ref(10)
let istrue = ref(true)
// let arr = reactive([10,20,30])
let arr = ref([10, 20, 30])
</script>

<style scoped></style>
